<script setup lang="ts">
defineOptions({
  name: "GAS_OPERATION_BOTTLEMANAGE_LEDGERMANAGE"
});
import { ref, markRaw } from "vue";
import switchTabs from "@/views/common/components/switchTabs/index.vue";
import supplyBottle from "./components/supplyBottle.vue";
import bottleInfo from "./components/bottleInfo.vue";
import sop from "./components/sop.vue";
import { type OptionsType } from "@/components/ReSegmented";

const options: Array<OptionsType> = [
  {
    label: "在供气瓶",
    name: "supplyBottle",
    com: markRaw(supplyBottle),
    props: {
      type: 1
    }
  },
  {
    label: "返库气瓶",
    name: "returnBottle",
    com: markRaw(supplyBottle),
    props: {
      type: 2
    }
  },
  {
    label: "过期特气废料",
    name: "expiredBottle",
    com: markRaw(supplyBottle),
    props: {
      type: 3
    }
  },
  {
    label: "气瓶信息",
    name: "bottleInfo",
    com: markRaw(bottleInfo)
  },
  {
    label: "CheckList管理",
    name: "sop",
    com: markRaw(sop)
  }
];

const activeTab = ref<string>("supplyBottle");
</script>

<template>
  <switchTabs v-model="activeTab" :options="options" />
</template>
<style lang="scss" scoped>
:deep(.table-tag) {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;

  .table-tag-content {
    padding: 4px 10px;
    font-weight: 500;
    line-height: 1;
    color: #ccc;
    letter-spacing: 1px;
    user-select: none;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
}
</style>
